<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <link rel="icon" href="../../static/img/favicons/favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github-dark-dimmed.min.css">
  <title>bToast - umd - DEMO</title>
  <meta name="description"
        content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.">
  <meta name="keywords"
        content="Bootstrap,Bootstrap5,Toast,dynamic,animation,autohide,delay,getInstance,getOrCreateInstance,show.bs.toast,shown.bs.toast,hide.bs.toast,hidden.bs.toast">
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?097448a07faa6124412179f6c9bfc688'
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
  </script>
  <script>
    function close_all_toast() {
      let all_toast = document.querySelectorAll('.toast');
      let all_toast_length = all_toast.length;
      for (let i = 0; i < all_toast_length; i++) {
        let x = bootstrap.Toast.getInstance(all_toast[i]);
        x.hide();
        x = null
      }
    }
  </script>
</head>
<body>
<div class="container alert alert-primary alert-dismissible fade show" role="alert">
  <a class="alert-link small" href="../../docs/toast.html" target="_blank" title="docs/bToast">docs/bToast</a>
  <div class="small">
    <span class="small text-muted">If you are not a novice, you can click the link above for more detailed information.</span>
  </div>
  <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"></button>
</div>
<div class="py-sm-5 min-vh-100 bg-primary bg-opacity-50">
  <div class="py-4 container border rounded">
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>toast-header</div>
        <span class="small text-muted"></span>
      </div>
      <div class="input-group">
        <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="toastHeader">header</label>
        <input type="text" class="form-control" id="toastHeader" placeholder="When empty, there will be no toast header" value="default header">
      </div>
      <div class="py-3">
        <div class="mb-2 form-check form-switch">
          <input class="form-check-input" id="headerFunctionSwitch" role="switch" type="checkbox">
          <label class="form-check-label" for="headerFunctionSwitch">Use Function control header content.</label>
        </div>
        <div class="w-75 input-group mb-3 d-none">
          <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="headerFunctionSelect">Function</label>
          <select class="form-select" id="headerFunctionSelect">
            <option value="returnHeader" selected>returnHeader</option>
            <option value="returnBody">returnBody</option>
            <option value="returnFooter">returnFooter</option>
            <option value="returnEmpty">returnEmpty</option>
            <option value="returnNull">returnNull</option>
            <option value="returnNaN">returnNaN</option>
            <option value="returnUndefined">returnUndefined</option>
            <option value="calcNumber">calcNumber</option>
            <option value="returnHTML_Element">returnHTML_Element</option>
          </select>
        </div>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>toast-body</div>
        <span class="small text-muted"></span>
      </div>
      <div class="input-group">
        <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="toastBody">body</label>
        <textarea class="form-control" id="toastBody" placeholder="Please enter content" rows="9">
<div>
<input type="button" class="btn btn-outline-success" data-bs-dismiss="toast" value="Close">
<input type="button" class="btn btn-outline-success" onclick="close_all_toast()" value="Close All">
<button type="button" class="btn btn-primary" onclick="alert('Saved');">Save changes</button>
</div>
        </textarea>
      </div>
      <div class="py-3">
        <div class="mb-2 form-check form-switch">
          <input class="form-check-input" id="bodyFunctionSwitch" role="switch" type="checkbox">
          <label class="form-check-label" for="bodyFunctionSwitch">Use Function control body content.</label>
        </div>
        <div class="w-75 input-group mb-3 d-none">
          <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="bodyFunctionSelect">Function</label>
          <select class="form-select" id="bodyFunctionSelect">
            <option value="returnHeader">returnHeader</option>
            <option value="returnBody" selected>returnBody</option>
            <option value="returnFooter">returnFooter</option>
            <option value="calcNumber">calcNumber</option>
            <option value="returnHTML_Element">returnHTML_Element</option>
          </select>
        </div>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>Placement</div>
        <span class="small text-muted">Placed, null value defaults to 'be' </span>
      </div>
      <div class="row row-cols-3">
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="ts" id="toastPlacement_ts">
            <label class="form-check-label" for="toastPlacement_ts">ts (Top Start)</label>
          </div>
        </div>
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="tc" id="toastPlacement_tc">
            <label class="form-check-label" for="toastPlacement_tc">tc (Top Center)</label>
          </div>
        </div>
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="te" id="toastPlacement_te">
            <label class="form-check-label" for="toastPlacement_te">te (Top End)</label>
          </div>
        </div>
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="ms" id="toastPlacement_ms">
            <label class="form-check-label" for="toastPlacement_ms">ms (Middle Start)</label>
          </div>
        </div>
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="mc" id="toastPlacement_mc">
            <label class="form-check-label" for="toastPlacement_mc">mc (Middle Center)</label>
          </div>
        </div>
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="me" id="toastPlacement_me">
            <label class="form-check-label" for="toastPlacement_me">me (Middle End)</label>
          </div>
        </div>
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="bs" id="toastPlacement_bs">
            <label class="form-check-label" for="toastPlacement_bs">bs (Bottom Start)</label>
          </div>
        </div>
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="bc" id="toastPlacement_bc">
            <label class="form-check-label" for="toastPlacement_bc">bc (Bottom Center)</label>
          </div>
        </div>
        <div class="my-1 col">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="toastPlacement" value="be" id="toastPlacement_be" checked>
            <label class="form-check-label" for="toastPlacement_be">be (Bottom End)</label>
          </div>
        </div>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>Options</div>
        <span class="small text-muted">The boolean value is true when it is turned on, and it is false when it is turned off</span>
      </div>
      <div class="my-3 row align-items-center">
        <div class="col-4 col-sm-2 col-lg-1">animation</div>
        <div class="col">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="toastAnimation" value="true" id="toastAnimation_true" checked>
            <label class="form-check-label" for="toastAnimation_true">true</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="toastAnimation" value="false" id="toastAnimation_false">
            <label class="form-check-label" for="toastAnimation_false">false</label>
          </div>
        </div>
      </div>
      <div class="my-3 row align-items-center">
        <div class="col-4 col-sm-2 col-lg-1">autohide</div>
        <div class="col">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="toastAutohide" value="true" id="toastAutohide_true" checked>
            <label class="form-check-label" for="toastAutohide_true">true</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="toastAutohide" value="false" id="toastAutohide_false">
            <label class="form-check-label" for="toastAutohide_false">false</label>
          </div>
        </div>
      </div>
      <div class="my-3 row align-items-center">
        <label class="col-4 col-sm-2 col-lg-1 col-form-label" for="toastDelay_number">delay</label>
        <div class="col col-sm-5 col-md-4 col-lg-3">
          <input class="form-control form-control-sm" type="number" name="toastDelay" value='5000' step="500" min="0" max="10000" id="toastDelay_number">
        </div>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="d-flex flex-column flex-md-row gap-2 gap-sm-3 gap-md-4">
        <div>
          <div class="mb-1">
            <div>Events Type</div>
            <span class="small text-muted">Bootstrap’s toast class exposes a few events for hooking into toast functionality.</span>
          </div>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-auto">
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="eventsType" value="show" id="toastEvents_show">
                <label class="form-check-label" for="toastEvents_show" title="show.bs.toast">show</label>
              </div>
            </div>
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="eventsType" value="shown" id="toastEvents_shown">
                <label class="form-check-label" for="toastEvents_shown" title="shown.bs.toast">shown</label>
              </div>
            </div>
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="eventsType" value="hide" id="toastEvents_hide">
                <label class="form-check-label" for="toastEvents_hide" title="hide.bs.toast">hide</label>
              </div>
            </div>
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="eventsType" value="hidden" id="toastEvents_hidden">
                <label class="form-check-label" for="toastEvents_hidden" title="hidden.bs.toast">hidden</label>
              </div>
            </div>
          </div>
        </div>
        <span class="d-block d-md-none dropdown-divider border-light"></span>
        <span class="d-none d-md-block vr bg-white"></span>
        <div>
          <div class="mb-1">
            <div>Events Function</div>
            <span class="small text-muted">Bootstrap’s toast class exposes a few events for hooking into toast functionality.</span>
          </div>
          <div class="input-group">
            <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="eventsFunction">Functions</label>
            <select class="form-select" id="eventsFunction">
              <option value="" disabled selected>Choose...</option>
              <option value="eventsFunction_1">eventsFunction_1</option>
              <option value="eventsFunction_2">eventsFunction_2</option>
              <option value="eventsFunction_3">eventsFunction_3</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <button class="my-4 mx-auto d-block btn btn-outline-primary bg-gradient" type="button" id="renderToast">Render Toast effect</button>
    <span class="d-block text-center small text-muted">hot key "Enter"</span>
  </div>
</div>
<div class="min-vh-100 bg-black bg-opacity-50">
  <div class="container">
    <span>Events Function code</span>
    <div>
        <pre>
          <code class="language-javascript language-plaintext" style="max-height: 70vh;">
function calcNumber() {
  return (1 + 2 + 3).toString()
}

function returnHeader() {
  return "function header"
}

function returnBody() {
  return "function body"
}

function returnFooter() {
  return "function footer"
}

function returnEmpty() {
  return ''
}

function returnNull() {
  return null
}

function returnNaN() {
  return NaN
}

function returnUndefined() {
  return undefined
}

function returnHTML_Element() {
  const html = document.createElement("div")
  const p = document.createElement("p")
  html.className = "bg-success"
  p.className = "text-center"
  p.innerHTML = "this is html obj."
  html.appendChild(p)
  return html
}

function eventsFunction_1() {
  alert('eventsFunction_1')
}

function eventsFunction_2() {
  alert('eventsFunction_2')
}

function eventsFunction_3() {
  console.log('eventsFunction_3')
}
          </code>
        </pre>
    </div>
  </div>
</div>
<div class="min-vh-100 bg-secondary bg-opacity-50">
  <div class="position-relative min-vh-100">
    <div class="position-absolute top-50 start-50 translate-middle">
      <div class="mx-auto position-relative" style="width: 50vw;height: 30vh;">
        <div class="position-absolute top-0 start-0">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_ts" data-toast-placement="ts">top start</button>
        </div>
        <div class="position-absolute top-0 start-50 translate-middle-x">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_tc" data-toast-placement="tc">top center</button>
        </div>
        <div class="position-absolute top-0 end-0">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_te" data-toast-placement="te">top end</button>
        </div>
        <div class="position-absolute top-50 start-0 translate-middle-y">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_ms" data-toast-placement="ms">middle start</button>
        </div>
        <div class="position-absolute top-50 start-50 translate-middle">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_mc" data-toast-placement="mc">middle center</button>
        </div>
        <div class="position-absolute top-50 end-0 translate-middle-y">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_me" data-toast-placement="me">middle end</button>
        </div>
        <div class="position-absolute bottom-0 start-0">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_bs" data-toast-placement="bs">bottom start</button>
        </div>
        <div class="position-absolute bottom-0 start-50 translate-middle-x">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_bc" data-toast-placement="bc">bottom center</button>
        </div>
        <div class="position-absolute bottom-0 end-0">
          <button class="my-1 btn btn-primary bg-gradient" type="button" id="toast_be" data-toast-placement="be">bottom end</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<!--<script src="../../../dist/b.bundle.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/b-components-js@0.0.3/dist/b.bundle.min.js"></script>-->
<script src="../../../dist/bToast.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/b-components-js@0.0.3/dist/bToast.min.js"></script>-->
<script src="../../static/js/index.js"></script>
<script src="../../static/js/sampleFunctionCode.js" id="sampleFunctionCode"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
<script>hljs.highlightAll()</script>
<script>
  functionSwitch('headerFunction')
  functionSwitch('bodyFunction')

  document.querySelector('#renderToast').addEventListener('click', renderResult)
  enterRender()

  function renderResult() {
    const toastHeader = checkboxStatus('headerFunction') ? selectFunctionValue('headerFunction') : selectValue('toastHeader')
    const toastBody = checkboxStatus('bodyFunction') ? selectFunctionValue('bodyFunction') : selectValue('toastBody')
    const Placement = getRadio('toastPlacement')
    const eventsType = getRadio('eventsType')
    const eventsFunctionSelect = selectValue('eventsFunction')
    const eventsFunction = eventsFunctionSelect ? eval(eventsFunctionSelect) : ''
    const Options = {
      animation: getRadio('toastAnimation'),
      autohide: getRadio('toastAutohide'),
      delay: getNumberValue('toastDelay')
    }

    const x = bToast(toastHeader, toastBody, Placement, Options, eventsType, eventsFunction)
    console.log('The return value of the current Toast', x)
  }
</script>
<script>
  const btnList = document.querySelectorAll("[id^=toast_]")
  btnList.forEach(currentBtn => {
    currentBtn.addEventListener('click', () => {
      bToast(currentBtn.textContent, currentBtn.textContent, currentBtn.dataset['toastPlacement'])
    })
  })
</script>
</body>
</html>